@yd: #4c4c4c;
@btncolor: #2a7fff;
@btncolor1: #2774e8;
.indexbox {
    padding-top: 10px;
}

.bgs {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 400px;
}

.mycanvas {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #ffffff;
}

.userinfo {
    background-color: #ffdc33;
    border-radius: 20px;
    position: relative;
    .usersh {
        position: absolute;
        top: 100px;
        text-align: center; // width: 100%;
        margin-left: 10px;
        .userqw {
            font-size: 32px;
            color: #ffffff;
        }
        .shtitle {
            font-size: 28px;
            display: block;
            text {
                font-size: 14px;
            }
        }
        .shtxt {
            font-size: 14px;
            line-height: 20px;
            display: block;
          
        }
        .shts {
            font-size: 14px;
            display: block;
         
        }
    }
    .xxbox {
        position: absolute;
        top: 40px;
        left: 90px;
        image {
            width: 20px;
            height: 20px;
        }
    }
    .locationBox {
        position: absolute;
        left: 90px;
        top: 50px;
        font-size: 14px;
    }
    .userLogo {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 70px;
        height: 70px;
        border-radius: 100%;
    }
    .userName {
        position: absolute;
        top: 10px;
        left: 90px;
        font-size: 20px;
    }
    .userstep {
        position: absolute;
        bottom: 10px;
        display: flex;
        flex-direction: column;
        text-align: center;
        .userbs {
            color: @yd;
            font-size: 48px;
            margin-bottom: -10px;
            .userbstext {
                font-size: 24px;
            }
        }
        .userm {
            color: @yd;
            font-size: 28px;
            margin-bottom: 5px;
            .usermm {
                font-size: 14px;
            }
        }
        .usertime {
            color: @yd;
            font-size: 14px;
        }
    }
}
.userBtns{
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 60px;
    z-index: 999;
    .img{
        height: 60px;
        width: 60px;
        box-shadow: 0px 10px 10px 0px #dcdcdc;
    }


}
.userBtn {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 35px;
    box-shadow: 0px 10px 10px 0px #dcdcdc;
    border-radius: 50px;
    button {
        width: 50%;
    }
    button[plain] {
        border: none!important;
    }
    button:after {
        border: none!important;
    }
    button:nth-child(1) {
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        background-color: @btncolor;
        color: #ffffff;
    }
    button:nth-child(2) {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        background-color: @btncolor1;
        color: #ffffff;
    }
}

@media screen and (min-width:360px) and (max-width:375px) {
    .userinfo {
        background-color: #ffdc33;
        border-radius: 20px;
        position: relative;
        .usersh {
            position: absolute;
            top: 130px;
            text-align: center; // width: 100%;
            margin-left: 10px;
            .userqw {
                font-size: 32px;
                color: #ffffff;
            }
            .shtitle {
                font-size: 28px;
                display: block;
                text {
                    font-size: 14px;
                }
            }
            .shtxt {
                font-size: 14px;
                line-height: 20px;
                display: block;
                font-family: ZoomlaXingtiJ3
            }
            .shts {
                font-size: 14px;
                display: block;
            }
        }
        .xxbox {
            position: absolute;
            top: 40px;
            left: 90px;
            image {
                width: 20px;
                height: 20px;
            }
        }
        .locationBox {
            position: absolute;
            left: 90px;
            top: 50px;
            font-size: 14px;
        }
        .userLogo {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 70px;
            height: 70px;
            border-radius: 100%;
        }
        .userName {
            position: absolute;
            top: 10px;
            left: 90px;
            font-size: 20px;
        }
        .userstep {
            position: absolute;
            bottom: 10px;
            display: flex;
            flex-direction: column;
            text-align: center;
            .userbs {
                font-size: 48px;
                margin-bottom: -5px;
                color: @yd;
                .userbstext {
                    font-size: 24px;
                }
            }
            .userm {
                color: @yd;
                font-size: 28px;
                margin-bottom: 5px;
                .usermm {
                    font-size: 14px;
                }
            }
            .usertime {
                color: @yd;
                font-size: 14px;
            }
        }
    }
}

@media screen and (min-width:375px) and (max-width:414px) {
    .userinfo {
        background-color: #ffdc33;
        border-radius: 20px;
        position: relative;
        .usersh {
            position: absolute;
            top: 150px;
            text-align: center; // width: 100%;
            margin-left: 10px;
            .userqw {
                font-size: 42px;
                color: #ffffff;
            }
            .shtitle {
                font-size: 28px;
                display: block;
                text {
                    font-size: 14px;
                }
            }
            .shtxt {
                font-size: 14px;
                line-height: 20px;
                display: block;
            }
            .shts {
                font-size: 14px;
                display: block;
            }
        }
        .xxbox {
            position: absolute;
            top: 40px;
            left: 90px;
            image {
                width: 20px;
                height: 20px;
            }
        }
        .locationBox {
            position: absolute;
            left: 90px;
            top: 50px;
            font-size: 14px;
        }
        .userLogo {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 70px;
            height: 70px;
            border-radius: 100%;
        }
        .userName {
            position: absolute;
            top: 10px;
            left: 90px;
            font-size: 20px;
        }
        .userstep {
            position: absolute;
            bottom: 10px;
            display: flex;
            flex-direction: column;
            text-align: center;
            .userbs {
                font-size: 68px;
                margin-bottom: -5px;
                color: @yd;
                .userbstext {
                    font-size: 24px;
                }
            }
            .userm {
                color: @yd;
                font-size: 28px;
                margin-bottom: 5px;
                .usermm {
                    font-size: 14px;
                }
            }
            .usertime {
                color: @yd;
                font-size: 14px;
            }
        }
    }
}

